<template>
  <div >
    <div class="center" style="padding:0 40px;">
      <div class="banner" style="padding-top: 50px;
        padding-bottom: 90px;text-align:center;">
        <l_banner :c_banner="banner_arr"></l_banner>
          <p class="tiao" style="font-family: georgia;font-size:16px;padding-top:15px;margin-left:4px;">
            <a href="#/no2">Shop Man </a>
            <a href="#/no3">Shop Women</a>
          </p>
      </div>
      <div style="min-height:638px;border-top:1px solid rgba(224,224,224,1);border-bottom:1px solid rgba(224,224,224,1);padding:40px 0px;">
            <el-carousel :interval="5000" arrow="always"  >
              <el-carousel-item v-for="item in 2" :key="item">
                <h3 style="display:none;">{{ item }}</h3>
              </el-carousel-item>
            </el-carousel>
          </div>
      <div class="shop" style="min-height:512px;border-bottom:1px solid rgba(224,224,224,1);padding:40px 0 80px; ">
          <div style="width:82px;height:552px;border-right:1px solid rgba(224,224,224,1);float:left;"><img  style="width:38px;height:74px;" src="https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNy9hMmJmMTJjNGM3MzE0NTMyMTI4YjY3MTE5ODllZDQ4ZS5zdmc_p_p100_p_3D.svg" alt=""></div>
            <ul style="width:202px;height:552px;border-right:1px solid rgba(224,224,224,1);float:left;font-weight:bold;font-size:12px;" class="list">

              <li style="text-align:center;"><a href=""><span style="font-family:微軟正黑體;font-size:16px;font-weight:bold;">吸湿排汗运动速干头巾</span><br>
  <b>Shop Now</b> </a></li>
              <li style="text-align:center;"><a href=""><span style="font-family:微軟正黑體;font-size:16px;font-weight:bold;">户外跑步自行车骑行帽 </span><br>
  <b>Shop Now</b> </a></li>
              <li style="text-align:center;"><a href=""><span style="font-family:微軟正黑體;font-size:16px;font-weight:bold;">春夏男款短袖上衣 </span><br>
  <b>Shop Now</b> </a></li>
              <li style="text-align:center;"><a href=""><span style="font-family:微軟正黑體;font-size:16px;font-weight:bold;">春夏男款短袖上衣 </span><br>
  <b>Shop Now</b> </a></li>
            </ul>
            <div style="float:left;padding-left:20px;">
              <img style="width:962px;" src="https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNi9iZGY4N2Y3MDM3OGRiNDBmOTc3NDNhZmE1ZGJkMDg3Zi0xNTAweDgwMC05MC53ZWJw.webp" alt="">
            </div>
      </div>
      <div
      class="event"
      style="padding:40px 0px;border-bottom:1px solid rgba(224,224,224,1)"
    >
      <div style="min-height:320px;">
        <div
          style="width:82px;height:313px;border-right:1px solid rgba(224,224,224,1);float:left;"
        >
          <img
            style="width:38px;height:74px;"
            src="https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNy82YzlhZWY5ZWQ2NjA5ZTVjMjgyMWU0ZDE5ZTdhODY1MC5zdmc_p_p100_p_3D.svg"
            alt=""
          />
        </div>
        <l_event :l_event="l_event"></l_event>
      </div>
    </div>


      <l_brand></l_brand>
    </div>
  </div>
</template>

<script>
import l_banner from './assets/l_banner'
import l_brand from './assets/l_brand'
import l_event from './assets/l_event'
export default {
  data(){
    return{
      banner_arr:[
        {title:'骑行',para:'被穿著在WorldTour赛事中贏得勝利，Aero系列包含有我們最速和最先進科技化的競赛車服。歷經多年研發只為助您縮短比赛秒數。'}
      ],
      l_event:[
        {
          img:
            "https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNi9kOGMxZTBkMjBlM2QyOGMxODM5MzUwOTI0NGYzNmNkNC01MDB4MzUwLTkwLndlYnA_p_p100_p_3D.webp",
          h4: "2018环青海湖-蓄势待发",
          p:
            "当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和..."
        },
        {
          img:
            "https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNi81YzQ2NWM5YWQ1YTNhODc3MTcwODA5MDMxNWYxZWY1OC01MDB4MzUwLTkwLndlYnA_p_p100_p_3D.webp",
          h4: "第一届公路自行车友谊赛",
          p:
            "当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和..."
        },
        {
          img:
            "https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNi9jNWM2MTEwOGJlMDBmMmUzNjY0MDFiZWY3ODk3OGUwYi01MDB4MzUwLTkwLndlYnA_p_p100_p_3D.webp",
          h4: "“爱在中国 · 为爱骑行”",
          p:
            "当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和..."
        },
        {
          img:
            "https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNi9iNzlmZGUxODY3ZTdmMGZiNDg0ODlmNTg1ZDY4YjEyYy01MDB4MzUwLTkwLndlYnA_p_p100_p_3D.webp",
          h4: "环鄱阳湖国际自行车大赛",
          p:
            "当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和..."
        }
      ]

    }
  },
  components:{
    l_banner,
    l_brand,
    l_event
  },

}
</script>
<style>
/* lunbo */


 .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;

    margin: 0;
  }
.el-carousel__container{
  height:650px;
  overflow:hidden;
}
  .el-carousel__item:nth-child(2n+1) {
    background-image: url('https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNi9kY2VlMjEzODRmMWI2MmYxNjMxOWEwNTAzYjU4ZDNlZi0xOTIweDg2MC05MC53ZWJw.webp');
    background-size:auto 100%;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #d3dce6;
    background-image: url('https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNi9iMGQ2OTYwZDYwMWU0NTIwMDE3NTYyZGRiMmNjZTA3ZC0xOTIweDg2MC05MC53ZWJw.webp');
     background-size:auto 100%;
  }
  .el-carousel__indicators {
    display: none;
  }

  .list{
    padding:0 20px;
    box-sizing: border-box;
  }
  .list li{

    border-bottom:1px solid rgba(224,224,224,1);
    font-size:16px;
  }
  .list li:last-of-type{
    border:none;
  }
  .list li a{
    transition:all .3s;
    color:#000;
    padding:40px 0;
    display: inline-block;


  }
   .border1{
    border-top:1px solid rgba(224,224,224,1);
  }
  .border2{
    border-bottom:1px solid rgba(224,224,224,1);
  }
  .border3{
    border-left:1px solid rgba(224,224,224,1);
  }
  .border4{
    border-right:1px solid rgba(224,224,224,1);
  }
    .list li a b{
      padding:2px;
      font-size:14px;
      font-weight:500;
      padding-top:20px;
      display:inline-block;
      font-family: georgia;
    }
  .list li:hover a  {
     color: #f67599;
  }

</style>
